//第一步 引入router
import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
//
//第二步 创建路由实例,首先安装vue-router，引入createRouter，配置routes数组，history模式为hash或者history
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // {
    //   path: "/home",
    //   name: "Home",
    //   component: () => import("@/views/home.vue"),
    // },
    {
      path: "/father",
      component: () => import("@/views/myProps/Father.vue"),
    },
    {
      path: "/emitFather",
      component: () => import("@/views/myEmit/father.vue"),
    },
    {
      path: "/mittFather",
      component: () => import("@/views/myMitt/father.vue"),
    },
    {
      path: "/modelFather",
      component: () => import("@/views/my-v-Model/Father.vue"),
    },
    {
      path: "/refsFather",
      component: () => import("@/views/my-refs/Father.vue"),
    },
    {
      path: "/injectFather",
      component: () => import("@/views/my-inject/Father.vue"),
    },
    {
      path: "/slotsFather",
      component: () => import("@/views/my-slots/Father.vue"),
    },
    {
      path: "/about",
      name: "About",
      component: () => import("@/views/about.vue"),
      children: [
        {
          path: "talkLove",
          name: "talkLove",
          component: () => import("@/components/myPina1.vue"),
        },
        {
          path: "count",
          name: "count",
          component: () => import("@/components/counter.vue"),
        },
      ],
    },
    {
      path: "/news",
      name: "News",
      component: () => import("@/views/news.vue"),
      children: [
        {
          path: "detail",
          name: "NewsDetail",
          component: () => import("@/views/newsDetail.vue"),
          //如果使用query路由传递参数，需要配置props，接收方受用defineProps接收，
          props: (route) => {
            return route.query;
          },
        },
      ],
    },
  ],
});

//第三步 导出路由实例
export default router;
